<template>
    <div class="">
        <!-- Form -->
        <el-dialog :title="isadd ? '添加菜单' : '编辑菜单'" :visible.sync="isShow" :before-close="cancel" center>
            <el-form :model="menuForm" :rules="rules" ref="menuForm">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
                    <el-input autocomplete="off" v-model="menuForm.title"></el-input>
                </el-form-item>

                <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
                    <el-select v-model="menuForm.pid" @change="changePid" placeholder="请选择">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in menulist" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-radio :label="1" v-model="menuForm.type" disabled>目录</el-radio>
                    <el-radio :label="2" v-model="menuForm.type" disabled>菜单</el-radio>
                </el-form-item>
                <el-form-item v-if="menuForm.type == 1" label="菜单图标" :label-width="formLabelWidth">
                    <el-select v-model="menuForm.icon" placeholder="请选择">
                        <el-option v-for="item in iconlist" :key="item" :label="item" :value="item">
                            <i :class="item"></i>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else label="菜单地址" :label-width="formLabelWidth">
                    <el-select
            v-model="menuForm.url"
            placeholder="请选择"
          >
            <el-option
              v-for="item in routesIndex"
              :key="item.path"
              :label="item.meta.title"
              :value="item.path"
            >
            </el-option>
          </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="menuForm.status"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click='cancel'>取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { menuAdd, menuEdit, getMenuInfo } from '../../request/api'
import { mapActions, mapGetters } from 'vuex'
//引入封装好路由数组
import {routesIndex} from '../../router'
export default {
    data() {
        return {
            // isShow:true
            formLabelWidth: '120px',
            menuForm: {
                pid: 0,
                title: '',
                icon: '',
                type: 1,
                url: '',
                status: 1
            },
            iconlist:['el-icon-s-tools','el-icon-setting','el-icon-star-off','el-icon-goods'],
            routesIndex:routesIndex,
            options: [{
                value: 1,
                label: '系统管理'
            }, {
                value: 2,
                label: '商城管理'
            }],
            rules: {
                title: [
                    { required: true, message: "请输入菜单名称", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
                ],
                pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
            },
            value: ''
        }
    },
    computed: {
        ...mapGetters({
            menulist: 'menu/getMenu'
        })
    },
    props: ['isShow', 'isadd'],
    methods: {
        ...mapActions({
            getMenuAction: 'menu/getMenuAction'
        }),
        // 封装一个切换事件用于修改菜单类型
        changePid() {
            this.menuForm.type = this.menuForm.pid == 0 ? 1 : 2;
            // this.menuForm.type = this.metuForm.pid == 0 ? 1 : 2;
        },
        // 封装一个重置方法
        reset() {
            this.menuForm = {
                pid: 0,
                title: '',
                icon: '',
                type: 1,
                url: '',
                status: 1
            };
            // 重置并移除检验结果
            this.$refs.menuForm.resetFields()
        },

        cancel() {
            this.reset()
            this.$emit('cancel', false)
        },

        // 封装一个获取一条数据事件
        lookup(id) {
            // console.log(id);
            getMenuInfo({ id }).then(res => {
                console.log(res);
                this.menuForm = res.list
                this.menuForm.id = id
            })
        },
        confirm() {
            this.$refs.menuForm.validate((val) => {
                if (val) {

                    if (this.isadd) {
                        // 添加流程 
                        menuAdd(this.menuForm).then((res) => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                // 关闭弹框
                                this.cancel()
                                // 调用列表接口
                                this.getMenuAction()
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        menuEdit(this.menuForm).then((res) => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                // 关闭弹框
                                this.cancel()
                                // 调用列表接口
                                this.getMenuAction()
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }

                }
            })

        }
    }
}
</script>
<style scoped lang="scss">

</style>